<template>
  <span style="cursor: pointer" @click="openModal">
    <slot>
      <a-button size="small" type="primary">
        <template #icon>
          <PlusOutlined />
        </template>
      </a-button>
    </slot>
  </span>

  <a-modal
    :width="'95%'"
    v-model:open="open"
    style="top: 8px"
    :title="data.title"
    :footer="null"
    :maskClosable="false"
  >
    <div>
      <a-alert :message="`关键字 : ${data.keywords}`" type="warning" />
      <div
        style="
          color: #666;
          text-align: right;
          margin-top: 8px;
          margin-bottom: 8px;
        "
      >
        创建于 {{ data.createTime }}
      </div>

      <div style="text-align:center;"><img :src='wcSrc'/></div>
      <UploadAttach :relaId="data.id" :classify="NORMAL" v-if="data.id" :canEdit="false"></UploadAttach>
      
      <Bytemd v-model:value="data.content" :canEdit="false"></Bytemd>






    </div>
  </a-modal>
</template>

<script setup>
import Bytemd from "@/components/mdeditor/bytemd/Bytemd.vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { messageApi, contextHolder } from "@/utils/MessageUtils.js";
import { ref, onMounted, watch } from "vue";
import UploadAttach from '@/components/upload/UploadAttach.vue'

import KcHooks from "@/hooks/KcHooks.js";
const open = ref(false);

const props = defineProps({
  articleId: {
    type: String,
    default: "button",
  },
});

function closeModal() {
  open.value = false;
}

function openModal() {
  // console.log('=====', props.id)
  // console.log('=====', data.value)
  loadPageData();
  open.value = true;
}

const data = ref({});

onMounted(async () => {
  
});

watch(
  () => props.articleId,
  async (v) => {
    
  }
);

async function loadPageData() {
  const res = await KcHooks.queryArticleById(props.articleId);
  // alert(JSON.stringify(res))
  data.value = res.result;
  wcSrc.value = `http://127.0.0.1:8899/kc/downloadByPath?filePath=${data.value.id}/wc.png&_r=${Math.random()}`
}

const wcSrc = ref('')

</script>

<style>
</style>